<template>
  <Header></Header>
  <Banner :isIndex="false" @changeCourse="changeCourse" :bannerList="banner_list" :courseList="course_list">

  </Banner>
  <div class="question-body">
    <div class="breadcrumb">
      <el-breadcrumb :separator-icon="'ArrowRightBold'">
        <el-breadcrumb-item class="link" @click="$router.push({name:'index'})">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ activeName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row justify="space-between">
      <el-col :span="4">
        <el-menu
            active-text-color="white"
            background-color="rgba(235, 244, 255, 1)"
            class="question"
            :default-active="currentItem"
            text-color="rgba(102, 102, 102, 1)"
            @select="handleSelect"
        >
          <el-menu-item index="live">
            <el-icon>
              <setting/>
            </el-icon>
            <span>正在直播</span>
          </el-menu-item>
          <el-menu-item index="livePreview">
            <el-icon>
              <setting/>
            </el-icon>
            <span>直播预告</span>
          </el-menu-item>
          <el-menu-item index="livePlayback">
            <el-icon>
              <setting/>
            </el-icon>
            <span>直播回放</span>
          </el-menu-item>
<!--          <el-menu-item index="myPreview">-->
<!--            <el-icon>-->
<!--              <setting/>-->
<!--            </el-icon>-->
<!--            <span>我的预约</span>-->
<!--          </el-menu-item>-->
        </el-menu>
      </el-col>
      <el-col :span="19">
        <component :is="currentItem" :state="state" :subject_id="activeSubjectId"
                   :subject_name="activeSubjectName"></component>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import live from "./tabs/live";
import livePreview from "./tabs/livePreview";
import livePlayback from "./tabs/livePlayback";
import myPreview from "./tabs/myPreview";
import Banner from "../../../components/Banner";
import Header from "@/components/Header";
import {useRoute, useRouter} from "vue-router";
import {bannerList, courseList} from "../../../api/api";
import {reactive, ref, onMounted} from 'vue';

export default {
  name: "index",
  setup() {
    let router = useRouter();
    let route = useRoute();
    //右侧动态组件
    let currentItem = ref('live');

    //当前课程
    let activeSubjectId = ref('')
    let activeSubjectName = ref('')
    let activeName = ref('')
    let state = ref('');
    let activeName_map = {
      'live': '正在直播',
      'livePreview': '直播预告',
      'livePlayback': '直播回放',
      'myPreview': '我的预约'
    }
    let active_map = {'1': 'live', '0': 'livePreview', '2': 'livePlayback', '3': 'myPreview'};
    let active_map_to_state = {'live': '1', 'livePreview': '0', 'livePlayback': '2', 'myPreview': '3'};
    currentItem.value = active_map[route.params.state];
    state.value = active_map_to_state[active_map[route.params.state]];

    activeName.value = activeName_map[active_map[route.params.state]];
    activeSubjectId.value = localStorage.getItem('activeCourse')
    activeSubjectName.value = localStorage.getItem('activeCourseName')

    //banner图集合
    let banner_list = ref([])
    let getBannerList = () => {
      bannerList({id: activeSubjectId.value, type: 1}).then(res => {
        console.log('轮播图列表', res)
        banner_list.value = res.data
      })
    }
    getBannerList();

    //切换课程
    let changeCourse = (activeCourse) => {
      let activeCourseName = course_list.filter(item => item.courseID == activeCourse.courseId)[0].name;
      console.log('activeCourseName', activeCourseName)
      window.localStorage.setItem('activeCourseName', String(activeCourseName));
      activeSubjectId.value = localStorage.getItem('activeCourse')
      activeSubjectName.value = localStorage.getItem('activeCourseName')
      getBannerList();
    }

    //课程列表
    let course_list = reactive([]);
    const getCourseList = () => {
      courseList().then(res => {
        console.log('课程列表', res)
        course_list.push(...res.data)
        let acoutCourse = window.localStorage.getItem('activeCourse') ? window.localStorage.getItem('activeCourse') : course_list[0].courseID
        window.localStorage.setItem('activeCourse', acoutCourse);
      })
    }
    getCourseList();

    //左侧menu
    const handleSelect = (key, keyPath) => {
      currentItem.value = key
      state.value = active_map_to_state[key]
      activeName.value = activeName_map[key];
    }

    onMounted(() => {
      // let current = localStorage.getItem('currentItem')
      // console.log('current',current)
      // if(current != 'undefined' || current != 'null'){
      //   console.log('current',current)
      //   currentItem.value = current
      // }else{
      //   currentItem.value = 'myCourse'
      // }
    })
    return {
      changeCourse,
      activeName,
      handleSelect,
      currentItem,
      activeSubjectId,
      activeSubjectName,
      course_list,
      banner_list,
      state
    }
  },
  components: {
    Header,
    Banner,
    live,
    livePreview,
    livePlayback,
    myPreview
  }
}
</script>

<style>
.el-menu-item.is-active {
  background-color: rgba(42, 130, 228, 1);
}
</style>

<style scoped>
.question-body {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 120px;
}

.breadcrumb {
  margin: 20px 0px;
}

.link {
  cursor: pointer;
}

.link :hover {
  color: #00a5ff !important;
}
</style>
